<template>
  <div class="paper-container">
    <el-container>

      <el-header style="height:inherit;">
        <el-form :model="PaperForm" :rules="rules" ref="PaperForm" :inline="true" class="demo-form-inline margindis">
          <div class="headDablecell">
            
          <el-form-item label="试卷名称" required prop="title" class="cascader">
            <el-input v-model="PaperForm.title"></el-input>
          </el-form-item>
          <el-form-item label="选择分类" required prop="typeList" class="cascader">
            <el-cascader :options="options" v-model="PaperForm.typeList" change-on-select>
            </el-cascader>
          </el-form-item>
          <el-form-item label="答卷时长" required prop="examTime" class="answerTime">
            <el-input v-model="PaperForm.examTime" class="time-input"></el-input>
            &nbsp;分钟
          </el-form-item>
          <el-form-item label="通过分数" required prop="passLine" class="answerTime">
            <el-input v-model="PaperForm.passLine" class="time-input"></el-input>
            &nbsp;分
          </el-form-item>
          </div>
          <div class="write-exam">
            <el-form-item label="试卷说明" required prop="remarks">
              <el-input type="textarea" v-model="PaperForm.remarks" class="textarea" resize="none"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </el-header>

      <el-container class="container">
        <el-aside width="38%">
          <div style="margin-top: 20px" class="btn-layout">
            <el-button class="filter-item" type="primary" v-waves icon="search" @click="showView('ViewAdd')">手动添加</el-button>
            <el-button class="filter-item" type="primary" v-waves icon="search" @click="showView('ViewImport')">批量导入</el-button>
            <el-button class="filter-item" type="primary" v-waves icon="search" @click="showView('ViewSelect')">从我的题库选择</el-button>
          </div>
          <div class="btn-bottom">
            <div class="scroll-bar">
              <el-table class="borderdel" :data="tableData" style="width: 100%">

                <el-table-column prop="id" type="index" label="序号" min-width="10%"></el-table-column>
                <el-table-column prop="question" label="题目" min-width="25%"></el-table-column>
                <el-table-column prop="classify" label="题型" min-width="25%"></el-table-column>
                <!-- <el-table-column prop="examType.typeName" label="分类" width="100"></el-table-column> -->

                <el-table-column align="right" show-overflow-tooltip min-width="40%">
                  <template slot-scope="scope">
                    <el-input v-model="goods[scope.$index]" placeholder="分值" @change="sumScore" class="score"></el-input>
                    <!-- <el-button @click.native.prevent="deleteRow(scope.$index, tableData)">
                      <i class="el-icon-delete"></i>
                    </el-button> -->
                    <el-button type="danger" icon="el-icon-delete" @click.native.prevent="handleDelete(scope.$index, tableData)"></el-button>
                  </template>
                </el-table-column>
                
              </el-table>

            </div>
          </div>
          <el-footer style="height: inherit">
            <div style="margin-top: 20px" class="footer clearfix">
              <p>
                总题数:
                <span v-html="this.questionCount"></span>道
              </p>
              <p>
                总分数:
                <span v-html="this.questionScore"></span>分
              </p>
              <div class="preview">
                <el-badge class="item">
                  <div class="review-container">
                    <el-dialog :visible.sync="dialogVisible" width="40%" :before-close="handleClose" v-loading="dialogLoading">
                      <div class="test-type">
                        <div class="qr-code">
                          <div>二维码图片</div>
                          <div>手机扫码预览</div>
                        </div>
                        <h4>java初级</h4>
                      </div>
                      <div class="scroll-bar">
                        <div class="review-header">

                          <div class="test-document">
                            <span>答卷时长:
                              <span v-html="this.PaperForm.examTime"></span> 分钟</span>
                            <span>共
                              <span v-html="this.questionCount"></span> 题 满分
                              <span v-html="this.questionScore"></span> 分</span>
                          </div>
                          <div class="documet-note clearfix">
                            <div>试卷说明：</div>
                            <div v-html="this.PaperForm.remarks">
                            </div>
                          </div>
                        </div>
                        <div class="review-body">
                          <dl v-for="(item, index) in questionOptionList" :key="item.key">
                            <dt class="ques">
                              <span v-html="index+1 + '、' + item.question + '（）'"></span>
                              <span v-html="item.questionNo"></span>
                            </dt>

                            <dd v-for="(item2, index2) in item.domains" :key="item2.key" v-html="numberConvertLetterFun(index2) + '.' + item2.value">
                            </dd>
                          </dl>
                        </div>
                      </div>
                    </el-dialog>
                  </div>
                </el-badge>
              </div>
              <div class="previewbtn">
              <el-button type="primary" @click="getOptionList()" class="selectbtn">预览</el-button>
              <el-button type="primary" @click="onSubmit('PaperForm')" class="btn-padding  btn-margin  selectbtn" :loading="btnFormLoading">立即保存</el-button>
              </div>
            </div>
          </el-footer>
        </el-aside>
        <el-main>
          <!-- <ViewAdd v-if="ViewAddIF" v-on:listenToViewAdd="listenToViewAdd"></ViewAdd>
          <ViewImport v-if="ViewImportIF"></ViewImport>
          <ViewSelect v-show="ViewSelectIF" v-on:listenToViewSelect="listenToViewSelect"></ViewSelect> -->
          <!-- 手动添加页 -->
          <div class="edit-container" v-show="ViewAddIF">
            <el-form :model="addQuestionForm" ref="addQuestionForm" :rules="addRules">
              <div class="classifyRow">
                <el-form-item label="分类" prop="typeList" required style=" width: 30%;" class="question-types select">
                  <el-col :span="16" class="question">
                    <el-form-item>
                      <el-cascader placeholder="请选择分类" :options="options" change-on-select
                      v-model="addQuestionForm.typeList"
                      >
                      </el-cascader>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="题型" required style=" width: 30%;" class="question-types select">
                  <el-col :span="16" class="question">
                    <el-form-item>
                      <el-select placeholder="请选择题型" @change="classifyChange"
                       v-model="addQuestionForm.classify"
                      >
                        <el-option label="单选题" value="1" check></el-option>
                        <el-option label="多选题" value="2"></el-option>
                        <el-option label="主观题" value="3"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="标签" style=" width: 30%; margin-left: -60px;" class="question-types highlevel">
                  <el-col :span="16" class="tag question">
                    <el-form-item prop="">
                      <el-input></el-input>
                    </el-form-item>
                  </el-col>
                </el-form-item>
              </div>
              <div class="tagName">
                <div></div>
                <div></div>
                <div>
                  <span>高级
                    <i class="el-icon-circle-close"></i>
                  </span>
                  <span>中级
                    <i class="el-icon-circle-close"></i>
                  </span>
                  <span>初级
                    <i class="el-icon-circle-close"></i>
                  </span>
                </div>
              </div>
              <el-form-item label="题目" prop="question" required class="sub">
                <el-col :span="20">
                  <el-input type="textarea" resize="none"
                   v-model="addQuestionForm.question"
                  ></el-input>
                </el-col>
              </el-form-item>
              <el-form-item class="delmargin" v-if="addDomainsVisible" :prop="'domains.' + index + '.value'" 
              :rules="{ required: true, trigger: 'blur', validator: validateDomains}"
              v-for="(domain, index) in addQuestionForm.domains" :key="domain.key">
                <el-col :span="1" class="radio">
                  <el-radio :label="index" v-show="addRadioVisible"
                   v-model="addQuestionForm.radio"
                  >
                    <span v-html="numberConvertLetterFun(index)"></span>
                  </el-radio>
                  <el-checkbox :label="index" v-show="addCheckedVisible"
                   v-model="domain.checked"
                  >
                    <span v-html="numberConvertLetterFun(index)"></span>
                  </el-checkbox>
                </el-col>
                <el-col :span="16">
                  <el-input v-model="domain.value"></el-input>
                </el-col>
                <el-col :span="1">
                  <span class="el-icon-delete editdel" @click.prevent="removeDomain(domain)"></span>
                </el-col>
              </el-form-item>
              <el-form-item v-show="addDomainsVisible" class="newAdd">
                <el-button @click="addDomain">新增选项</el-button>
              </el-form-item>
              <div class="savePos">
                <el-form-item label="试题解析" prop="remarks" class="sub">
                  <el-col :span="20">
                    <el-input type="textarea" resize="none"
                     v-model="addQuestionForm.remarks"
                    ></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item class="btncenter">
                  <!--@click="submitForm('addQuestionForm')" 保存的名字不要用冲突  -->
                  <el-button type="primary" @click="submitForm('addQuestionForm')" :loading="addBtnLoading">保存</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
      <!-- 批量导入 -->
        <div class="batch-container" v-show="ViewImportIF">
          <div class="content">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList2"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
              <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList2"
            list-type="picture">
            <el-button size="small" type="primary">上传exel</el-button>
            </el-upload>
            <el-button type="primary" @click="submitForm('questionForm','0')" :loading="btnLoading">保存</el-button>
            </div>
          </div>
      <!-- 从我的题库选择 -->
          <div class="qsslect-container" v-show="ViewSelectIF">
            <el-form :model="questionForm" :rules="rules" ref="questionForm" label-width="100px" class="demo-questionForm">
              <el-form-item label="分类" required style=" width: 30%;" class="question-types select">
                <el-col :span="5" class="question">
                  <el-form-item>
                    <el-cascader
                      placeholder="请选择分类"
                      :options="options"
                      v-model="questionForm.typeList"
                      change-on-select
                      >
                    </el-cascader>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="题型" required style=" width: 30%;" class="question-types select">
                <el-col :span="5" class="question">
                  <el-form-item>
                    <el-select placeholder="请选择题型">
                      <el-option label="全部题型" value=""></el-option>
                      <el-option label="单选题" value="1"></el-option>
                      <el-option label="多选题" value="2"></el-option>
                      <el-option label="主观题" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="关键词" style=" width: 30%; margin-left: -20px;" class="question-types select">
                <el-col :span="5" class="tag question">
                  <el-form-item>
                    <el-input v-model="questionForm.question"></el-input>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-button type="primary" class="search" @click="search()" :loading="btnLoading">查询</el-button>
            </el-form>
            <div class="table">
              <el-container>
                <el-main>
                  <el-table v-loading="tableLoading" element-loading-text="请给我点时间！" ref="multipleTable" :data="questionTableData" tooltip-effect="dark"
                    style="width: 100%" @selection-change="handleSelectionChange" :row-key="getRowKeys">
                    <el-table-column prop="id" type="selection" min-width="20%" :reserve-selection="true"></el-table-column>
                    <el-table-column type="index" label="序号" min-width="20%"></el-table-column>
                    <el-table-column prop="question" label="题目" show-overflow-tooltip min-width="20%"></el-table-column>
                    <el-table-column prop="classify" label="题型" min-width="20%"></el-table-column>
                    <el-table-column prop="examType.typeName" label="分类" min-width="20%"></el-table-column>
                  </el-table>
                </el-main>
              </el-container>
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="pageTotal" style="margin-top: 20px;">
              </el-pagination>
            </div>
          </div>
        
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script>
// import ViewAdd from '@/views/quiz/components/add'
// import ViewImport from '@/views/quiz/components/import'
// import ViewSelect from '@/views/quiz/components/select'
// import { fetchTree } from '@/api/profession'
//  import Bus from '@/utils/bus'
// import { fetchAdd } from '@/api/quiz'
// import { fetchOptionList } from '@/api/question'
// import { checkNumber, isvalidateRequired } from '@/utils/validate'
// import { Message } from 'element-ui'
// import { fetchInsertBack, fetchGet } from '@/api/question'
// import { numberConvertLetter } from '@/utils/index'
// import { fetchList, fetchTree } from "@/api/question"


import { fetchAdd } from '@/api/quiz'
import { checkNumber, isvalidateRequired } from '@/utils/validate'
import { Message } from 'element-ui'
import { fetchInsertBack, fetchOptionList, fetchList, fetchTree } from '@/api/question'
import { numberConvertLetter } from '@/utils/index'
export default {
  data() {
    const validateTitle = (rule, value, callback) => {
      if (!isvalidateRequired(value)) {
        callback(new Error("请输入试卷名称"));
      } else {
        callback();
      }
    };
    const validateTypeList = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error("请选择试卷分类"));
      } else {
        callback();
      }
    };
    const validateExamTime = (rule, value, callback) => {
      if (!isvalidateRequired(value)) {
        callback(new Error("请输入答卷时长"));
      } else {
        if (!checkNumber(value)) {
          callback(new Error("必须是数字"));
        } else {
          callback();
        }
      }
    };
    const validatePassLine = (rule, value, callback) => {
      if (!isvalidateRequired(value)) {
        callback(new Error("请输入通过分数"));
      } else {
        if (!checkNumber(value)) {
          callback(new Error("必须是数字"));
        } else {
          if (value > this.questionScore) {
            callback(new Error("通过分数必须小于题目分数"));
          } else {
            callback();
          }
        }
      }
    };
    const validateRemarks = (rule, value, callback) => {
      if (!isvalidateRequired(value)) {
        callback(new Error("请输入试卷名称"));
      } else {
        callback();
      }
    };
    //手动添加的验证回调函数
    const validateAddTypeList = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error("请选择类型"));
      } else {
        callback();
      }
    };
    const validateAddQuestion = (rule, value, callback) => {
      if (!isvalidateRequired(value)) {
        callback(new Error("请输入题干"));
      } else {
        callback();
      }
    };
    const validateAddRemarks = (rule, value, callback) => {
      if (!isvalidateRequired(value)) {
        callback(new Error("请输入备注"));
      } else {
        callback();
      }
    };
    const validateDomains = (rule, value, callback) => {
      if (!isvalidateRequired(value)) {
        callback(new Error("选项不能为空"));
      } else {
        callback();
      }
    };
    return {
      ViewAddIF: false,
      ViewImportIF: false,
      ViewSelectIF: true,
      options: [],
      tableData: [],
      dialogVisible: false,
      btnFormLoading: false,
      dialogLoading: false,
      questionCount: 0,
      questionScore: 0,
      formState: 0,
      ids: "",
      PaperForm: {
        title: "",
        examTime: "",
        typeList: [],
        passLine: "",
        remarks: "",
        questionList: []
      },
      goods: [],
      rules: {
        title: [{ required: true, trigger: "blur", validator: validateTitle }],
        typeList: [
          { required: true, trigger: "change", validator: validateTypeList }
        ],
        examTime: [
          { required: true, trigger: "blur", validator: validateExamTime }
        ],
        passLine: [
          { required: true, trigger: "blur", validator: validatePassLine }
        ],
        remarks: [
          { required: true, trigger: "blur", validator: validateRemarks }
        ],
        questionOptionList: []
      },
      //手动添加的参数
      addQuestionForm: {
        id: "",
        typeList: [],
        classify: "1",
        question: "",
        domains: [
          {
            value: "",
            checked: true
          },
          {
            value: "",
            checked: false
          },
          {
            value: "",
            checked: false
          },
          {
            value: "",
            checked: false
          }
        ],
        radio: 0,
        remarks: ""
      },
      addRadioVisible: true,
      addCheckedVisible: false,
      addDomainsVisible: true,
      addBtnLoading: false,
      validateDomains: validateDomains,
      //rule里的trigger: 'blur'/trigger: 'change'表触发条件,validator: validateAddTypeList表处理函数对应的函数名
      addRules: {
        typeList: [
          //这个规则怎么不起作用？？要加prop在每一个el-form-item
          { required: true, trigger: "change", validator: validateAddTypeList }
        ],
        question: [
          { required: true, trigger: "blur", validator: validateAddQuestion }
        ],
        remarks: [
          { required: true, trigger: "blur", validator: validateAddRemarks }
        ]
      },
      //我的题库选择参数
      treeId: "",
      questionForm: {
        id: "",
        typeList: [],
        classify: "",
        question: ""
      },
      questionTableData: [],
      tableLoading: false,
      currentPage: 1,
      pageSize: 10,
      pageTotal: 100,
      getRowKeys(row) {
        return row.id;
      },
      multipleTable: []
    };
  },
  created() {
    this.getTree();
    this.getQuestionList();
  },
  methods: {
    showView(viewName) {
      switch (viewName) {
        case "ViewAdd":
          this.ViewAddIF = true;
          this.ViewImportIF = false;
          this.ViewSelectIF = false;
          break;
        case "ViewImport":
          this.ViewImportIF = true;
          this.ViewAddIF = false;
          this.ViewSelectIF = false;
          break;
        case "ViewSelect":
          this.ViewSelectIF = true;
          this.ViewImportIF = false;
          this.ViewAddIF = false;
          break;
      }
    },
    //手动添加的方法
    addDomain() {
      //上面domains是属性checked这里push的是key？？
      this.addQuestionForm.domains.push({
        value: "",
        key: Date.now()
      });
    },
    //每个case后面必须带有break,题型选中后相应的地方展示
    classifyChange(val) {
      switch (val) {
        case "1":
          this.addRadioVisible = true;
          this.addCheckedVisible = false;
          this.addDomainsVisible = true;
          break;
        case "2":
          this.addRadioVisible = false;
          this.addCheckedVisible = true;
          this.addDomainsVisible = true;
          break;
        case "3":
          this.addRadioVisible = false;
          this.addCheckedVisible = false;
          this.addDomainsVisible = false;
          break;
      }
    },
    //处理数字转化为字符串
    numberConvertLetterFun(num) {
      //这个需要返回值，光调用无意义
      return numberConvertLetter(num);
    },
    removeDomain(item) {
      if (this.addQuestionForm.domains.length === 2) {
        Message.warning("最少两个选项");
      } else {
        //为啥不直接删除对应索引？答案可以
        // this.addQuestionForm.domains.splice(item,1)
        var index = this.addQuestionForm.domains.indexOf(item);
        if (index !== -1) {
          this.addQuestionForm.domains.splice(index, 1);
        }
      }
    },
    submitForm(formName) {
      //原先是this.$refs.formName点语法，下面是关联语法
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addBtnLoading = true;
          fetchInsertBack(this.addQuestionForm)
            .then(response => {
              if (response.data.status === 200) {
                Message.success("保存题目成功");
                this.questionForm.typeList = [];
                this.treeId = "";
                this.currentPage = 1;
                this.questionForm.question = "";
                this.getQuestionList().then(response => {
                  //这个方法为了在手动添加后保存我的题库，切换第一行的选中状态。由于异步请求，没有then的话它会将原先的第一个即现在看到的第二个切换选中。而应该在请求完才能执行。那样才是数据更新后第一个
                  this.$refs.multipleTable.toggleRowSelection(
                    this.questionTableData[0]
                  );
                });
              } else {
                Message.error("系统异常,保存题目失败");
              }
              this.resetForm(formName);
              this.addBtnLoading = false;
            })
            .catch(_ => {
              Message.error("系统异常,保存题目失败!!");
              this.addBtnLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      //这个是表单重置的方法，在element-ui的form表单
      this.$refs[formName].resetFields();
    },

    //我的题库方法
    getTree() {
      this.treeLoading = true;
      fetchTree().then(response => {
        this.options = response.data.data;
        this.treeLoading = false;
      });
    },
    getQuestionList() {
      this.tableLoading = true;
      return fetchList(
        this.treeId,
        this.currentPage,
        this.pageSize,
        this.questionForm.question
      ).then(response => {
        // console.log(response)
        this.pageTotal = response.data.total;
        this.questionTableData = response.data.data;
        this.tableLoading = false;
      });
    },
    search() {
      this.currentPage = 1;
      this.getQuestionList(this.questionForm.question);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getQuestionList();
    },
    handleSelectionChange(val) {
      this.tableData = val;
    },
    handleDelete(index, table) {
      table.splice(index, 1);
    },
    /* 预览方法 */
    getOptionList() {
      this.sumScore()
      this.ids = ''
      if (this.tableData.length > 0) {
        this.dialogVisible = true
        this.dialogLoading = true
        this.tableData.forEach(row => {
          this.ids += row.id + ','
        })
        /* 这一步请求题目列表传参是一串id拼接 */
        fetchOptionList(this.ids).then(response => {
          console.log(response)
          if (response.data.status === 200) {
            this.questionOptionList = response.data.data
          } else {
            Message.error('系统异常,预览失败')
          }
          this.dialogLoading = false
        }).catch(_ => {
          Message.error('系统异常,预览失败!!')
          this.dialogLoading = false
        })
      } else {
        Message.warning('请先添加题目')
      }
    },
    /* 保存提交 */
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.btnFormLoading = true
          this.sumScore()
          if (this.questionCount === 0 ) {
            Message.warning('请添加题目,从右侧列表选择')
            this.btnFormLoading = false
            /* 阻止继续往下执行代码 */
            return false
          }
          if (this.formState > 0) {
            Message.warning('请为所有题目分配分数,必须是数字')
            this.btnFormLoading = false
            return false
          }
          fetchAdd(this.PaperForm).then(response => {
            // console.log(response)
            if (response.data.status === 200 ) {
              Message.success('保存试卷成功')
              this.goBack()
            } else {
              Message.error('系统异常,保存试卷失败')
            }
            this.btnFormLoading = false
          }).catch(_ => {
            Message.error('系统异常,保存试卷失败!!')
            this.btnFormLoading = false
          })
        } else {
          return false
        }
      })
    },
    goBack() {
      this.$router.push({
        /* 这里的path，名要与router里index.js的children子路由path名一样、name也要一样才能跳转。且必须有 */
        path: '/index',
        name: 'quiz-index'
      })
    }
  }
}
</script>
<style scoped>
.paper-container .container {
  position: absolute;
  left: 180px;
  right: 0;
  top: 260px;
  bottom: 0;
}

.paper-container .el-container .margindis {
  margin-right: inherit;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

.clearfix::after {
  content: ".";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}

.clearfix {
  zoom: 1;
}

.el-header {
  color: #333;
  padding: 0;
  margin: 0 auto;
  margin-top: 10px;
}

.headDablecell .el-form-item {
  width: 24%;
  display: table-cell;
}
.headDablecell {
  display: table;
  width: 100%;
}
.headDablecell>>>.el-form-item__label {
  width: 80px;
  float: left;
}
.headDablecell>>>.el-form-item__content {
  margin-left: 84px;
  display: inherit;
}
.el-aside {
  color: #333;
  border-right: 1px solid #dadde4;
  border-top: 1px solid #dadde4;
  position: relative;
  margin-right: 6px;
  box-shadow: 0 0 4px #dadde4;
  min-width: 396px;
}

.el-header .el-form .write-exam .el-form-item {
  display: block;
}

.write-exam > div:first-child {
  width: 100%;
}

.write-exam > div:first-child {
  width: 90% !important;
}

.write-exam > div:first-child>>>.el-form-item__content {
  width: 100%;
  margin-left: 0;
}

.scroll-bar {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}

.borderdel>>>.el-table_1_column_1 {
  text-align: center;
  color: #fff;
}

.borderdel>>>.el-table_1_column_2 > .cell {
  padding: 0 4px;
}

.borderdel>>>.el-table_1_column_1 > .cell > div {
  background-color: #999;
  padding: 0;
  height: 30px;
  width: 30px;
  line-height: 30px;
  border-radius: 50%;
}

.borderdel>>>.el-table__body-wrapper {
  overflow: auto;
}

.borderdel>>>tr:nth-child(odd) {
  /* background-color: #D7D7D7; */
}

.el-header .time-input {
  width: 70%;
}

.borderdel .el-input {
  width: 50% !important;
  font-size: 12px;
  min-width: 66px;
}

.borderdel>>>.el-input__inner {
  padding: 0 20px;
}
.el-icon-delete {
  font-size: 20px;
}

.borderdel>>>.el-table_1_column_6 {
  text-align: right;
}

.btn-layout {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.btn-bottom {
  height: 70%;
}

.el-main {
  color: #333;
  /* text-align: center; */
  line-height: 30px;
  border: 1px solid #dadde4;
  box-shadow: 0 0 4px #dadde4;
}

.el-footer {
  padding: 0;
  border-top: 1px solid #dadde4;
  border-bottom: 1px solid #dadde4;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-left: 10px;
}

.el-footer > .footer {
  margin-top: 2px !important;
}
.previewbtn {
  display: inline-block;
  /* height: 30px; */
  line-height: 38px;
  float: right;
}
.selectbtn {
  display: inline-block;
  margin: 0 10px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-table .cell {
  padding-left: 30px !important;
}

.el-table .warning-row {
  background: #d7d7d7;
}

.el-table .success-row {
  background: #f0f9eb;
}

.footer p {
  display: inline-block;
  line-height: 38px;
  margin: 0;
}

.preview {
  display: inline-block;
}

/* 预览框试卷样式 */

.test-type {
  padding-left: 40px;
  padding-right: 40px;
  margin-bottom: 20px;
}

.test-type h4 {
  text-align: center;
  margin: 0;
  font-weight: 400;
}

.qr-code {
  position: absolute;
}

.qr-code > div {
  display: inline-block;
}

.qr-code > div:last-child {
  width: 40px;
  font-size: 12px;
  line-height: 16px;
}

.review-container>>>.el-dialog__body {
  padding: 0 20px;
}

.test-document {
  margin-bottom: 14px;
}

.test-document span {
  margin-right: 20px;
}

.test-document span:first-child {
  margin-right: 60px;
}

.documet-note {
  display: flex;
  flex: 1;
}

.test-document,
.documet-note {
  padding-left: 60px;
  padding-right: 40px;
}

.documet-note > div:first-child {
  min-width: 70px;
}

.review-body {
  padding: 0 120px;
}

.review-body dd {
  margin: 0;
}

.review-body dt {
  position: relative;
}

.review-body dt span {
  position: absolute;
  right: 0;
}

/* 手动添加页面样式 */

.edit-container .el-main {
  text-align: left;
  margin: 0 auto;
  padding: 0;
}

.el-form {
  /* width: 76%; */
  margin: 0 auto;
}

.classifyRow {
  display: table;
  width: 100%;
  padding-left: 52px;
  margin-top: 20px;
}
.classifyRow .highlevel .question>>>.el-form-item__content {
  width: 70% !important;
}
.edit-container .el-form .classifyRow .el-form-item {
  display: table-cell;
}

.classfy {
  width: 100%;
}

.el-col-2 {
  padding-left: 6px;
}

.tagName {
  line-height: 24px;
  width: 100%;
  font-size: 14px;
  padding-left: 52px;
  display: table;
}

.tagName div {
  display: table-cell;
  width: 30%;
}

.sub {
  margin-left: 52px;
}

.sub>>>.el-form-item__label {
  width: 100% !important;
  text-align: left;
}

.sub>>>.el-form-item__content {
  margin-left: 0 !important;
}

.delmargin>>>.el-form-item__content {
  margin-left: 56px !important;
}
.radio {
  min-width: 50px;
}
.el-col-11 {
  margin-left: 10px;
}

.savePos {
  margin-top: 6%;
}
.newAdd {
  text-align: center;
}
.editdel {
  font-size: 22px;
  margin-left: 10px;
}
.editdel:hover {
  cursor: pointer;
}
.btncenter {
  text-align: center;
}
/* 批量导入 */
.content {
  margin-top: 25%;
  text-align: center;
}
.batch-container .el-button {
  width: 100px;
  font-size: 16px;
}
.batch-container div {
  line-height: 60px;
}
/* 从我的题库选择 */
.qsslect-container {
  padding: 10px 0;
}
.qsslect-container .el-form {
  text-align: left;
}
.qsslect-container .demo-questionForm {
  display: table;
  width: 100%;
}
.question-types>>>.el-form-item__label,
.question>>>.el-form-item__label {
  width: 60px !important;
}
.question>>>.el-form-item {
  width: 70%;
}
.qsslect-container .demo-questionForm .el-form-item {
  display: table-cell;
}
.question-types>>>.el-form-item__content {
  margin-left: 60px !important;
}
.question>>>.el-form-item__content {
  margin-left: 0px !important;
  width: 100% !important;
}

.question,
.tag {
  width: 100%;
}

.search {
  vertical-align: top;
  margin-left: 10px;
}
.table {
  text-align: center;
  margin-top: 20px;
}
.table > div {
  text-align: left;
  line-height: 24px;
  /* margin-top: -20px; */
}

.table .el-checkbox {
  padding: 0 14px;
}

.table span {
  margin: 0 30px;
}

.table>>>.el-select > .el-input {
  width: 80px;
}

.el-main {
  color: #333;
  text-align: left;
  border-bottom: 0;
  padding: 0;
}

.table .page {
  margin-top: 20px;
  text-align: center;
}

.el-pagination {
  display: inline-block;
}

.save {
  margin-top: 20px;
}

.save .search {
  width: 120px;
}
</style>
<style>
body {
  margin: 0;
  padding: 0;
}

.borderdel.el-table--border td,
.borderdel.el-table--border th {
  border-right: 0;
}

.borderdel .el-table__header-wrapper {
  height: 0;
}
</style>